<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>拖拽和缩放</title>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/newmap.js"></script>
    <style>
        a {
            cursor: pointer;
        }

        .middleBox {
            width: calc(58% - 2px);
            overflow: hidden;
            float: left;
            margin: 0 1%;
            margin-left: 21%;
        }


        #div {
            width: 100%;
            height: 640px;
            overflow: hidden;
            position: relative;
            border: 1px solid #000;
            border-radius: 0px 0px 5px 5px;
        }

        .postA {
            position: absolute !important;
            z-index: 9;
            height: 30px;
            width: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #fff;
            border: 2px solid #cccccc;
            left: 10px;
            top: 10px;
            color: #000;
        }

        .postA:hover {
            text-decoration: none;
            background-color: #eeeeee;
            color: #000;
        }

        #div #textBox {
            position: absolute;
            width: 100%;
            height: 600px;
            cursor: move;
            background-color: #1a252f;
        }
        #div img {
            position: absolute;
            width: 100%;
            cursor: move;
        }
    </style>
</head>

<body>
<!-- 中间区域 -->
<div class="middleBox">
    <div class="mainTitleBox"> 拖拽和缩放</div>
    <div id="div" onmousewheel="return bbimg(this)">
        <!-- 点击缩小放大 -->
        <a class="glyphicon glyphicon-zoom-in postA" onclick="amplify(1)"></a> <a
            class="glyphicon glyphicon-zoom-out postA" style="top:39px;" onclick="amplify(2)"></a>
<!--        <img id="img" border="0" src="images/test.png"/>-->

        <div id="textBox">
                <img style="width: 90%;height: 100%;margin-left: 5%"  border="0" src="images/test.png"/>-->
        </div>
    </div>
</div>
</body>
</html>
<script>

    //获取相关CSS属性
    var getCss = function (o, key) {
        return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
    };
    //拖拽的实现
    var startDrag = function (bar, target, callback) {
        if (getCss(target, "left") !== "auto") {
            params.left = getCss(target, "left");
        }
        if (getCss(target, "top") !== "auto") {
            params.top = getCss(target, "top");
        }
        //o是移动对象
        bar.onmousedown = function (event) {
            params.flag = true;
            if (!event) {
                event = window.event;
                //防止IE文字选中
                bar.onselectstart = function () {
                    return false;
                }
            }
            var e = event;
            params.currentX = e.clientX;
            params.currentY = e.clientY;
        };
        document.onmouseup = function () {
            params.flag = false;
            if (getCss(target, "left") !== "auto") {
                params.left = getCss(target, "left");
            }
            if (getCss(target, "top") !== "auto") {
                params.top = getCss(target, "top");
            }
        };
        document.onmousemove = function (event) {
            var e = event ? event : window.event;

            if (params.flag) {
                var nowX = e.clientX, nowY = e.clientY;
                var disX = nowX - params.currentX, disY = nowY - params.currentY;
                target.style.left = parseInt(params.left) + disX + "px";
                target.style.top = parseInt(params.top) + disY + "px";

                if (typeof callback == "function") {
                    callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
                }

                if (event.preventDefault) {
                    event.preventDefault();
                }
                return false;
            }


        }
    };

    startDrag(document.getElementById("textBox"), document.getElementById("textBox"))


    $("#img").hover(function () {
        jQuery(document.body).css({
            "overflow-x": "hidden",
            "overflow-y": "hidden"
        });
    }, function () {
        jQuery(document.body).css({
            "overflow-x": "auto",
            "overflow-y": "auto"
        });
    });


</script>